<template>
	<el-collapse-transition>
		<div v-show="showFlag" class="app-content">
			<div class="transition-box">
				<div class="search">
					<el-input
						size="mini"
						placeholder="请输入应用名称"
						v-model="search.appName">
						<i slot="suffix" class="el-input__icon el-icon-search" @click="getAppList"></i>
					</el-input>
				</div>
				<div class="app-list" v-if="appList.length > 0">
					<template v-for="item in appList">
						<div class="app-item" :class="{'app-item-active': item.id === activeIndex}" :key="item.id"
								 @click="handleSelect(item)">
							{{item.appName}}
						</div>
					</template>
				</div>
				<div class="app-list" v-else>
					暂无数据
				</div>
				<el-pagination
					@size-change="handleSize"
					@current-change="handleCurrent"
					:current-page="search.currentPage"
					:page-sizes="[10, 20, 30, 40]"
					:page-size="search.pageSize"
					layout="prev, pager, next"
					small
					:total="50">
				</el-pagination>
			</div>
		</div>
	</el-collapse-transition>
</template>

<script>
	export default {
		name: "menuDropdown",
		data: () => {
			return {
				appList: [
					{
						appDescribe: null,
						appId: "154058",
						appName: "测试app",
						appShortName: "app",
						appType: 2,
						bizId: null,
						createName: "admin",
						createTime: 1623724842000,
						extMessage: "{\"officialAddress\":\"http://10.135.56.21:9002/behavior_web/application/siteManage\",\"testAddress\":\"http://10.135.56.21:9002/behavior_web/application/siteManage\"}",
						id: 97,
						mngDeptId: "00003",
						officialAddress: "http://10.135.56.21:9002/behavior_web/application/siteManage",
						orgName: null,
						productCode: "dx",
						status: 1,
						testAddress: "http://10.135.56.21:9002/behavior_web/application/siteManage",
						totalEvents: null,
						updateTime: 1623724851000,
					},
				],
				total: 0,
				search: {
					currentPage: 1,
					pageSize: 10,
					appName: null
				},
				activeIndex: null,
				showFlag: false
			}
		},
		props: {
			show: {
				type: Boolean
			}
		},
		computed: {
			appItem() {
				return this.$store.state.global.appItem;
			}
		},
		watch: {
			show(val) {
				this.showFlag = val;
			},
			appItem(val) {
				if (val) {
					this.activeIndex = val.id;
				} else {
					this.activeIndex = null;
				}
			}
		},
		created() {
			this.getAppList();
		},
		mounted() {
		},
		methods: {
			// appList
			async getAppList() {
				let res = await this.$applicationApi.app_list(this.search);
				if (res) {
					let {list, total} = res.value;
					this.appList = list;
					this.total = total;
				}
			},
			handleCurrent(page) {
				this.search.currentPage = page;
				this.getAppList();
			},
			handleSize(size) {
				this.search.currentPage = 1;
				this.search.pageSize = size;
				this.getAppList();
			},
			handleSelect(item) {
				this.$store.commit("SET_APP_ITEM", JSON.stringify(item));
				sessionStorage.setItem("appItem", JSON.stringify(item));
				this.$router.push({
					path: "/dataAnalysis/dataCard"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.app-content {
		z-index: 2001;
		position: absolute;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.transition-box {
		/*margin-bottom: 10px;*/
		width: 300px;
		line-height: 1.5;
		border-radius: 4px;
		border: 1px solid #EBEEF5;
		box-shadow: 0 2px 9px 1px #7178812b;
		box-sizing: border-box;
		background: #fff;
		text-align: center;
		color: #475669;
		font-size: 14px;
		font-variant: tabular-nums;
		list-style: none;
		font-feature-settings: "tnum";
		padding: 16px 20px;
		cursor: default;
		box-sizing: border-box;
		/*margin-right: 20px;*/

		.app-list {
			max-height: 300px;
			overflow: auto;

			.app-item,
      .baidu-item,
      .jingd-item{
				text-align: center;
				border: 1px solid #01b27a;
				color: #01b27a;
				margin: 8px 0;
				padding: 5px 0;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				cursor: pointer;

				&:hover {
					background-color: #e4f9f9;
				}

				&.app-item-active {
					background-color: #e4f9f9;
				}
			}
		}

		.el-pagination {
			margin-top: 10px;
			margin-bottom: 0;
			text-align: center;
		}
	}
</style>
